<template>
  <div class="qn-video-player">
    <div
      :id="'playerIndex' + playerIndex"
      style="width: 100%; height: 100%"
    ></div>
    <!-- <canvas id="face-overlay"></canvas> -->
  </div>
</template>
<script>
// import { runFaceTrack } from '@/utils/face'
export default {
  props: {
    playerOptions: {
      type: [Object],
      required: true,
    },
    playerIndex: {
      type: [Number],
      default: 0,
    },
  },
  data() {
    return {
      qplayer: "",
      // isTrack: false
    };
  },
  // updated(){
  //   console.log("qnPlay通过$refs设置的videoTitle",this.ipcArrs);
  // },
  methods: {
    initPlay() {
      let container = document.getElementById(`playerIndex${this.playerIndex}`);
      console.log("container组件", container);
      this.playerOptions.container = container;
      this.qplayer = new QPlayer(this.playerOptions);
      var playerIndex = this.playerIndex;
      var that = this;
      // this.qplayer.on('ready', () => {
      //   console.log('ready')
      // })
      // this.qplayer.on('play', () => {
      //   console.log('play')
      //   if (this.isTrack) return
      //   this.isTrack = true
      //   runFaceTrack($(`#playerIndex${this.playerIndex} video`).get(0), $('#face-overlay').get(0))
      // })
      // this.qplayer.on('loading', () => {
      //   console.log('loading')
      // })
      this.qplayer.on("error", () => {
        let ipcArrs = JSON.parse(sessionStorage.getItem("ipcArrs"));
        let checked = ipcArrs["pos_" + playerIndex].checked;
        // 判断本地存储的checked，假如侧边点击取消视频播放更改了checked，则不触发重连机制
        if (checked) {
          console.log("视频错误error:", playerIndex, ",触发重连");
          // 视频播放出错，重连机制
          that.$emit("reconnet", playerIndex);
        }
      });
      // this.qplayer.on('notification', () => {
      //   // console.log("备用方案：此处添加计数器，计算播放出错次数，判断是否重连");
      //   // that.$emit('reconnet',playerIndex);
      // });
    },
  },
  mounted() {
    var playerIndex = this.playerIndex;
    var that = this;
    if (this.playerOptions.url) {
      this.initPlay();
    }
  },
  beforeDestroy() {
    if (this.qplayer) {
      this.qplayer.destroy();
      this.qplayer = "";
    }
  },
};
</script>

<style lang="scss">
// #face-overlay {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   z-index: 10;
// }
.qn-video-player {
  width: 100%;
  height: 100%;
  position: relative;
  .qplayer-wrapper {
    cursor: default;
  }
  .qplayer-loading {
    background: rgba(255, 255, 255, 0);
  }
  video {
    object-fit: fill;
  }
  .qplayer-controlswrapper {
    .qplayer-center-btn {
      display: none;
    }
    .qplayer-controls {
      display: none;
      .qplayer-playbtn {
        display: none;
      }
    }
    .qplayer-fullscreen {
      display: none;
    }
  }
}
</style>
